<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
		<style>
			.el-dropdown-link {
				cursor: pointer;
				color: #409EFF;
			}
			.el-icon-arrow-down {
				font-size: 12px; /**i标签对应的图标符号的大小*/
			}
		</style>
	</head>
	<body>
		<div>
			<h1>{{info}}</h1>
			<!--@command是点击下拉菜单中某一项时触发的事件    ,:hide-on-click="false"可以让菜单项单机之后不关闭-->
			<!-- trigger="click" 是设置菜单需要点击才能展开，设置为hover是鼠标经过就展开-->
			<!-- size="medium"表示中等尺寸，其他的还有small,mini(不写是默认尺寸) -->
			<el-dropdown  @command="handleCommand" :hide-on-click="false"  trigger="click"  size="medium">
			  <span class="el-dropdown-link">
			    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
			  </span>
			  <!-- slot为dropdown 来设置下拉菜单 -->
			  <el-dropdown-menu slot="dropdown"  >
			    <el-dropdown-item  v-for="i in arr" :command="i.price">{{i.name}}</el-dropdown-item>
			  </el-dropdown-menu>
			</el-dropdown>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<!-- import JavaScript -->
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		var v=new Vue({
			el: "body>div",
			data:function(){
				return {
					info:"",
					arr:[{name:"小米手机",price:2000},
						 {name:"华为手机",price:4000}]
				}
			},
			methods:{
				handleCommand(command){
					v.$message("商品价格是："+command);//弹出消息框(这里不能只用消息框显示一个数字，否则会报错)
					v.info=command;
				}
			}
		});
	</script>
</html>
